<template>
	<RePage v-loading="isLoading" v-page-show="{ show: operate.checkedProject, text: `请选择项目后查看` }">
		<el-form style="width: 50%;" label-position="top" ref="ruleFormRef" :model="formInline" label-width="auto"
			v-if="!isLoading" :key="formKey">
			<el-row :gutter="30">
				<el-col :span="24">

					<el-form-item label='大屏标题' prop=''>
						<el-input clearable v-model="formInline.screenTitle" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.logo' prop='logo'>
						<!-- <ReUpload v-model:files='formInline.logo' :limit="1" :isText="true">
						</ReUpload> -->
						<div class="flex flex-col">
							<el-image class="w-[586px] h-[42px] mb-[10px]" :src="formInline.logo">
								<template #error>
									<div class="image-slot w-[586px] h-[42px] flex justify-center items-center"
										style="border: 1px solid #999999;">
										<el-icon><icon-picture /></el-icon>
									</div>
								</template>
							</el-image>
							<UploadFile class="leading-[1]" v-model:files="formInline.logo" :limit="1"
								accept=".png,.jpg">
							</UploadFile>
							<div class="!mt-[0px]  leading-[1]">
								<el-text class="!text-[red] !leading-[1]">
									注: 推荐图片尺寸为 586*42px
								</el-text>
							</div>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.indexMode'>
						<el-radio-group v-model="formInline.indexMode">
							<el-radio v-for="item in HOMEPAGE_TYPE" :key="item.value" :value="item.value">
								{{ isNullOrEmpty(item.label) }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.viewMode'>
						<el-radio-group v-model="formInline.viewMode">
							<el-radio v-for="item in VIEWMODE" :key="item.value" :value="item.value">
								{{ isNullOrEmpty(item.label) }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.planMode'>
						<el-radio-group v-model="formInline.planMode">
							<el-radio v-for="item in PLANMODE" :key="item.value" :value="item.value">
								{{ isNullOrEmpty(item.label) }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.mapPoints'>
						<div class="flex flex-1">
							<el-input type="number" clearable v-model="formInline.lng" class="mr-[10px] !w-[200px]" />
							<el-input type="number" clearable v-model="formInline.lat" class="mr-[10px] !w-[200px]" />
							<el-button type="primary" @click="edit">选择</el-button>
						</div>

					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label="titlesSet?.projectPlan">
						<div class="flex flex-col">

							<div>
								<ReUpload :limit="1" v-model:files='formInline.projectPlan' accept=".png"></ReUpload>
							</div>
							<div class="leading-[1] text-[red] mb-[10px]">注:只允许 .png 格式</div>
							<el-button type="primary" @click="selectMapImage">平面图位置</el-button>
						</div>


					</el-form-item>

				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.VR'>
						<el-input v-model='formInline.VR' clearable placeholder="请输入项目720云VR链接地址" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.threeD'>
						<el-input v-model='formInline.threeD' clearable placeholder="请输入项目三维链接地址" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.topoId'>
						<configurationSelect v-model='formInline.topoId' clearable placeholder='请选择组态'
							:style='{ width: "100%" }'>
						</configurationSelect>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.menuMode'>
						<el-radio-group v-model='formInline.menuMode'>
							<el-radio v-for="item in MENUMODDE_TYPE" :key="item.value" :value="item.value">
								{{ isNullOrEmpty(item.label) }}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="formInline.menuMode == 2">

					<tables v-model:dataList="formInline.screenMenus" class="w-[100%]">
					</tables>

				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.dutyUids'>
						<authorizeuserproject multiple v-model='formInline.dutyUids' :isid="1"
							:projectId="operate.checkedProject" clearable placeholder='请选择项目负责人'
							:style='{ width: "100%" }'>

						</authorizeuserproject>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item :label='titlesSet?.noticeType'>
						<el-checkbox-group v-model="formInline.noticeType">
							<el-checkbox :value="1" label="APP">

							</el-checkbox>
							<el-checkbox :value="2" label="短信">

							</el-checkbox>
							<el-checkbox :value="3" label="电话">

							</el-checkbox>

							<el-checkbox :value="4" label="公众号">

							</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label='' label-width="110px">
						<div class="flex " v-auth="'business.project-setting.update'">
							<el-button type="primary" @click="Debouncesubmit">保存</el-button>
						</div>
					</el-form-item>

				</el-col>
			</el-row>
		</el-form>
	</RePage>
</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import { ref } from "vue";
import { titlesSet } from './setting';
import ReUpload from '@/components/ReUpload/index.vue'
import UploadFile from "@/components/ReUpload/UploadFile.vue";
// import mapForm from '@/components/mapForm/mapForm.vue'
import SjMap from "@/components/mapForm/map.vue"
import configurationSelect from '@/components/select/configuration/ConfigurationSelect/ConfigurationSelect.vue'
import RePage from "@/components/RePage/index.vue";
import tables from './components/table.vue'
import { ElMessage } from "element-plus";
import { getInfo, editInfo } from "@/api/operate/project-management/projectManagement/setting";
import { HOMEPAGE_TYPE, MENUMODDE_TYPE, NOTICE_TYPE,PLANMODE ,VIEWMODE} from '@/constant/projectManagement'
import { addDialog, closeDialog } from "@/components/ReDialog";
import { deviceDetection, debounce } from "@pureadmin/utils";
import { arrayUniqueAndRepeat } from "@/utils/functions";
import { customPromiseDebounce } from "@/utils/functions";
import { usePageVariablesStoreHook, UNIT_TYPE_VIEW_Map } from '@/store/modules/pageVariables'
import authorizeuserproject from "@/components/select/authorizeuser/authorizeuserproject.vue";
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { isEmpty } from "@pureadmin/utils";
import { formValidateField } from '@/utils/functions'
import mapImage from '@/components/map-image/map-image.vue'
const operate = usePageVariablesStoreHook().getOperate()
const formKey = ref(0)
const ruleFormRef = ref()
const formRefs = ref()
const formInline = ref({
} as any)
const isLoading = ref(true)
const showInfo = ref();
const formRef = ref();
const labelMarkers = ref() //已经标记过的点位
const formState = reactive({
	center: [],
	area: []
})


const selectMapImage = () => {  //平面图位置
	addDialog({
		title: '平面图位置',
		width: "800px",
		draggable: true,
		props: {
			image: formInline.value.projectPlan,
			center: [formInline.value.lng, formInline.value.lat],
			bounds: formInline.value.bounds
		},
		fullscreen: deviceDetection(),
		fullscreenIcon: true,
		closeOnClickModal: false,
		hideFooter: true,
		contentRenderer: ({ options, index }) => h(mapImage, {
			ref: formRefs,
			onConfirm: (val) => {
				closeDialog(options, index)
				formInline.value.bounds = val
				// console.log("提交的数据类型", val);

			}
		}),
	})
}
// 开启弹窗
const openDialog = () => {
	formInline.value.area = formInline.value.mapPoints
	formState.center = [formInline.value.lng, formInline.value.lat]
	// console.log("提交的数据类型", formInline.value.area, 'we', formInline.value.mapPoints);
	addDialog({
		title: '地图标记',
		width: "800px",
		draggable: true,
		props: {
			center: formState.center,
			isEdit: true,
			showCreatePoly: true,
			labelMarkers: labelMarkers.value,
			area: formInline.value.mapPoints
		},
		fullscreen: deviceDetection(),
		fullscreenIcon: true,
		closeOnClickModal: false,

		contentRenderer: () => h(SjMap, {
			ref: formRef,
			"onUpdate:center": (val) => {
				formState.center = val
			},
			"onUpdate:area": (val) => {
				formState.area = val
			},
		}),
		/*
			contentRenderer: () => h(mapForm, {
			  ref: formRef,
			}),
		*/
		beforeSure: (done, { options }) => {
			function chores() {
				formInline.value.lng = formState.center[0]
				formInline.value.lat = formState.center[1]
				formInline.value.mapPoints = formState.area
				isLoading.value = false
				// props.formInline.markPoint. = formState.area
				// console.log("提交的数据类型", props.formInline.markPoint);

				done(); // 关闭弹框
				// getinfo(); // 刷新表格数据
			}

			chores()
		}
	})


}
// 编辑
const edit = () => {
	showInfo.value = {}
	openDialog()
}
const getinfo = () => {
	isLoading.value = true;
	if (operate.checkedProject == null) {
		return
	} else {
		getInfo().then(res => {
			if (res.code == 200) {


				// if(res.result.screenMenus == null){
				// 	formInline.value.screenMenus = 1
				// }


				res.result?.screenMenus?.forEach((item: any) => {
					if (item.menuType != 2) {
						item.url = parseInt(item.url)
					}
				})
				formInline.value = res.result
				if(formInline.value.bounds == null){
					formInline.value.bounds = [104.044794, 30.644344, 104.050713, 30.648466]
				}
				formInline.value.lng = res.result.lng
				formInline.value.lat = res.result.lat
				isLoading.value = false
				if (res.result.noticeType == null) {


					formInline.value.noticeType = []
				}
				console.log("获取信息", res);

			}
		}).finally(() => {
			formKey.value++
			isLoading.value = false
		})
	}

}


const submit = () => {
	ruleFormRef.value.validate(valid => {
		if (valid) {
			if (formInline.value.menuMode == 1) {
				isLoading.value = true;
				editInfo(formInline.value).then(res => {
					ElMessage.success(res.msg)
				}).finally(() => {
					isLoading.value = false;
				})
			} else if (formInline.value.screenMenus.some(item => isEmpty(item.menuName) || isEmpty(item.menuType) || isEmpty(item.url))) {
				ElMessage.error('请检查输入是否完整')
				return
			} else if (arrayUniqueAndRepeat(formInline.value.screenMenus, 'menuName')) {
				ElMessage.error('菜单名称重复')
				return
			} else if (arrayUniqueAndRepeat(formInline.value.screenMenus, item => `menuType: ${item.menuType}, url: ${item.url}`)) {
				ElMessage.error('菜单链接重复')
				return
			} else {
				isLoading.value = true;
				editInfo(formInline.value).then(res => {
					ElMessage.success(res.msg)
				}).finally(() => {
					isLoading.value = false;
				})
			}
		}
	})


}



onMounted(() => {
	getinfo()
});
const Debouncesubmit = debounce(submit, 1000, true);
// 编辑请求
const DebounceEditInfo = customPromiseDebounce(editInfo, 1000, true);
</script>
<style scoped>
.footer-wrapper {
	margin-top: -1px;
	/* 重叠原表格的分隔线 */
	width: 100%;

	::v-deep(.el-table__cell) {
		padding: 0 !important;
	}
}

.footer-table .el-table__row {
	padding: 0 !important;
	background-color: #f2f2f2;
	/* 设置合计行的背景色 */
}

::v-deep(.el-upload-list__item-name) {
	padding: 0 !important;
}

::v-deep(.el-upload-list__item-info) {
	margin-left: 0 !important;
}
</style>